---
type: tutorial
title: Créer une page d'index pour les étiquettes
description: |-
  Tutoriel : Créer votre premier blog avec Astro —
  Utilisez tout ce que vous avez appris jusqu'à présent pour créer une page d'index pour les étiquettes
i18nReady: true
---
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

Maintenant que vous avez des pages individuelles pour chaque étiquette, il est temps de créer des liens vers ces dernières.

<PreCheck>
  - Ajouter une nouvelle page en utilisant le modèle de routage `/pages/dossier/index.astro`
  - Afficher une liste de toutes vos étiquettes uniques, en créant des liens vers chaque page d'étiquette
  - Mettre à jour votre site avec des liens de navigation vers cette nouvelle page d'étiquettes
</PreCheck>

## Utiliser le modèle de routage `/pages/dossier/index.astro`

Pour ajouter à votre site web une page d'index pour les étiquettes, vous pourriez créer un nouveau fichier `src/pages/tags.astro`.

Mais, comme vous avez déjà le dossier `/tags/`, vous pouvez profiter d'un autre modèle de routage dans Astro et regrouper tous vos fichiers liés aux étiquettes ensemble.

<Box icon="puzzle-piece">

## Essayer par vous-même - Créer une page d'index pour les étiquettes

<Steps>
1. Créez un nouveau fichier `index.astro` dans le dossier `src/pages/tags/`.

2. Accédez à l'adresse `http://localhost:4321/tags` et vérifiez que votre site contient désormais une page à cette URL. Elle sera vide, mais elle existera.

3. Créez une page minimale `src/pages/tags/index.astro` qui utilise votre mise en page. Vous avez déjà fait cela auparavant !

    <details>
      <summary>Cliquez pour voir les étapes</summary>
      <Steps>
      1. Créez un nouveau composant de page dans `src/pages/tags/`.

          <details>
          <summary>Afficher le nom du fichier</summary>
          ```
          index.astro
          ```
          </details>

      2. Importez et utilisez votre composant `<BaseLayout>`.

          <details>
          <summary>Afficher le code</summary>
          ```astro title=" src/pages/tags/index.astro"
          ---
          import BaseLayout from '../../layouts/BaseLayout.astro';
          ---
          <BaseLayout></BaseLayout>
          ```
          </details>

      3. Définissez un titre de page et transmettez-le à votre mise en page en tant qu'attribut de composant.

          <details>
          <summary>Afficher le code</summary>
          ```astro title="src/pages/tags/index.astro" ins={3} "pageTitle"
          ---
          import BaseLayout from '../../layouts/BaseLayout.astro';
          const pageTitle = "Index des étiquettes";
          ---
          <BaseLayout pageTitle={pageTitle}></BaseLayout>
          ```
          </details>
      </Steps>
    </details>

4. Vérifiez à nouveau l'aperçu dans votre navigateur, et vous devriez avoir une page formatée, prête à recevoir du contenu !
</Steps>
</Box>

## Créer un tableau d'étiquettes

Vous avez déjà affiché des éléments dans une liste à partir d'un tableau en utilisant `map()`. À quoi cela ressemblerait-il de définir un tableau de toutes vos étiquettes, puis de les afficher dans une liste sur cette page ?

<details>
    <summary>Voir le code</summary>

    ```astro title="src/pages/tags/index.astro"
    ---
    import BaseLayout from '../../layouts/BaseLayout.astro';
    const tags = ['astro', 'blogging', 'apprentissage en public', 'réussites', 'obstacles', 'communauté']
    const pageTitle = "Index des étiquettes";
    ---
    <BaseLayout pageTitle={pageTitle}>
      <ul>
        {tags.map((tag) => <li>{tag}</li>)}
      </ul>
    </BaseLayout>
    ```
</details>

Vous pourriez faire cela, mais alors vous devriez revenir sur ce fichier et mettre à jour votre tableau à chaque fois que vous utilisez une nouvelle étiquette dans un futur article de blog.

Heureusement, vous savez déjà comment récupérer les données de tous vos fichiers Markdown en une seule ligne de code, puis renvoyer une liste de toutes vos étiquettes.

<Steps>
1. Dans `src/pages/tags/index.astro`, ajoutez la ligne de code au script frontmatter qui donnera à votre page accès aux données de chaque fichier de blog `.md`.

    <details>
    <summary>Voir le code</summary>
    ```astro title = "src/pages/tags/index.astro" ins={3}
    ---
    import BaseLayout from '../../layouts/BaseLayout.astro';
    const allPosts = Object.values(import.meta.glob('../posts/*.md', { eager: true }));
    const pageTitle = "Index des étiquettes";
    ---
    ```
    </details>

2. Ensuite, ajoutez la ligne de code JavaScript suivante à votre composant de page. Il s'agit du même code reposant sur la prise en charge de TypeScript intégrée dans Astro que vous avez utilisé dans `src/pages/tags/[tag].astro` pour renvoyer une liste d'étiquettes uniques.

    ```astro title = "src/pages/tags/index.astro" ins={4}
    ---
    import BaseLayout from '../../layouts/BaseLayout.astro';
    const allPosts = Object.values(import.meta.glob('../posts/*.md', { eager: true }));
    const tags = [...new Set(allPosts.map((post: any) => post.frontmatter.tags).flat())];
    const pageTitle = "Index des étiquettes";
    ---
    
    ```
</Steps>

## Créer votre liste d'étiquettes

Au lieu de créer des éléments dans une liste non ordonnée cette fois-ci, créez un `<p>` pour chaque élément, à l'intérieur d'un `<div>`. La formule devrait vous sembler familière !

<Steps>
1. Ajoutez le code suivant à votre modèle de composant :

    ```astro title="src/pages/tags/index.astro" ins={2}
      <BaseLayout pageTitle={pageTitle}>
        <div>{tags.map((tag) => <p>{tag}</p>)}</div>
      </BaseLayout>
    ```
    Dans l'aperçu de votre navigateur, vérifiez que vos étiquettes sont répertoriées. S'il manque des étiquettes à vos articles de blog ou si elles sont mal formatées, la prise en charge de TypeScript intégrée dans Astro vous indiquera les erreurs afin que vous puissiez vérifier et corriger votre code.

2. Pour que chaque étiquette renvoie à sa propre page, ajoutez le lien `<a>` suivant à chaque étiquette unique :

    ```astro title="src/pages/tags/index.astro" '/tags/${tag}'
    <BaseLayout pageTitle={pageTitle}>
      <div>
        {tags.map((tag) => (
          <p><a href={`/tags/${tag}`}>{tag}</a></p>
        ))}
      </div>
    </BaseLayout>
    ```
</Steps>

## Ajouter des styles à votre liste d'étiquettes

<Steps>
1. Ajoutez les classes CSS suivantes pour mettre en forme à la fois votre `<div>` et chaque `<p>` qui sera généré. À noter : Astro utilise la syntaxe HTML pour ajouter des noms de classe !

    ```astro title="src/pages/tags/index.astro" 'class="tags"' 'class="tag"'
    <BaseLayout pageTitle={pageTitle}>
    <div class="tags">
      {tags.map((tag) => (
        <p class="tag"><a href={`/tags/${tag}`}>{tag}</a></p>
      ))}
    </div>
    </BaseLayout>
    ```

2. Définissez ces nouvelles classes CSS en ajoutant la balise `<style>` suivante à cette page :

    ```astro title="src/pages/tags/index.astro"
    <style>
      a {
        color: #00539F;
      }

      .tags {
        display: flex; 
        flex-wrap: wrap; 
      }

      .tag {
        margin: 0.25em;
        border: dotted 1px #a1a1a1;
        border-radius: .5em;
        padding: .5em 1em;
        font-size: 1.15em;
        background-color: #F8FCFD;
      }
    </style>
    ```

3. Vérifiez l'aperçu dans votre navigateur à l'adresse `http://localhost:4321/tags` pour vérifier que vous avez de nouveaux styles et que chacune des étiquettes de la page possède un lien fonctionnel vers sa propre page d'étiquette individuelle.
</Steps>
  
### Validation du code

Voici à quoi devrait ressembler votre nouvelle page :

```astro title="src/pages/tags/index.astro"
--- 
import BaseLayout from '../../layouts/BaseLayout.astro';
const allPosts = Object.values(import.meta.glob('../posts/*.md', { eager: true }));
const tags = [...new Set(allPosts.map((post: any) => post.frontmatter.tags).flat())];
const pageTitle = "Index des étiquettes";
---
<BaseLayout pageTitle={pageTitle}>
  <div class="tags">
    {tags.map((tag) => (
      <p class="tag"><a href={`/tags/${tag}`}>{tag}</a></p>
    ))}
  </div>
</BaseLayout>
<style>
  a {
    color: #00539F;
  }

  .tags {
    display: flex; 
    flex-wrap: wrap; 
  }

  .tag {
    margin: 0.25em;
    border: dotted 1px #a1a1a1;
    border-radius: .5em;
    padding: .5em 1em;
    font-size: 1.15em;
    background-color: #F8FCFD;
  }
</style>
```

## Ajouter cette page à votre navigation

Actuellement, vous pouvez naviguer vers `http://localhost:4321/tags` et voir cette page. À partir de cette page, vous pouvez cliquer sur des liens vers vos pages d'étiquettes individuelles.

Cependant, vous devez toujours rendre ces pages accessibles depuis d'autres pages de votre site web.

<Steps>
1. Dans votre composant `Navigation.astro`, ajoutez un lien vers cette nouvelle page d'index pour vos étiquettes.

    <details>
    <summary>Affichez-moi le code</summary>
    ```astro title="src/components/Navigation.astro" ins={4}
    <a href="/">Accueil</a>
    <a href="/a-propos/">À propos</a>
    <a href="/blog/">Blog</a>
    <a href="/tags/">Étiquettes</a>
    ```
    </details>
</Steps>
  
<Box icon="puzzle-piece">

## Défi : Inclure les étiquettes dans la mise en page de vos articles de blog

Vous avez maintenant écrit tout le code dont vous avez besoin pour afficher également une liste d'étiquettes sur chaque article de blog, et les lier à leurs pages d'étiquettes. Vous avez du code existant que vous pouvez réutiliser !

Suivez les étapes ci-dessous, puis vérifiez votre travail en le comparant à l'[exemple de code final](#validation-du-code--markdownpostlayout).
<Steps>
  
1. Copiez `<div class="tags">...</div>` et `<style>...</style>` depuis `src/pages/tags/index.astro` et réutilisez-les à l'intérieur de `MarkdownPostLayout.astro` :

    ```astro title="src/layouts/MarkdownPostLayout.astro" ins={11-15, 19-37}
    ---
    import BaseLayout from './BaseLayout.astro';
    const { frontmatter } = Astro.props;
    --- 
    <BaseLayout pageTitle={frontmatter.title}>
      <p>{frontmatter.pubDate.toString().slice(0,10)}</p>
      <p><em>{frontmatter.description}</em></p>
      <p>Écrit par : {frontmatter.author}</p>
      <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} /> 
  
      <div class="tags">
        {tags.map((tag: string) => (
          <p class="tag"><a href={`/tags/${tag}`}>{tag}</a></p>
        ))}
      </div>
  
      <slot />
    </BaseLayout>
    <style>
      a {
        color: #00539F;
      }
  
      .tags {
        display: flex; 
        flex-wrap: wrap; 
      }
  
      .tag {
        margin: 0.25em;
        border: dotted 1px #a1a1a1;
        border-radius: .5em;
        padding: .5em 1em;
        font-size: 1.15em;
        background-color: #F8FCFD;
      }
    </style>
    ```

</Steps>
  
Avant que ce code ne fonctionne, vous devez apporter **une petite modification** au code que vous avez collé dans `MarkdownPostLayout.astro`. Pouvez-vous deviner ce que c'est ?

<details>
<summary>Donnez-moi un indice</summary>

Comment les autres props (par exemple, le titre, l'auteur, etc.) sont-elles écrites dans votre modèle de mise en page ? Comment votre mise en page reçoit-elle les props d'un article de blog individuel ?
</details>

<details>
<summary>Donnez-moi un autre indice !</summary>

Pour utiliser les props (valeurs transmises) d'un article de blog en Markdown dans votre mise en page, comme les étiquettes, vous devez préfixer la valeur avec un certain mot.

<details>
<summary>Affichez-moi le code !</summary>

```astro title="src/layouts/MarkdownPostLayout.astro" "frontmatter"
    <div class="tags">
      {frontmatter.tags.map((tag) => (
        <p class="tag"><a href={`/tags/${tag}`}>{tag}</a></p>
      ))}
    </div>
```
</details>
</details>
</Box>

### Validation du code : MarkdownPostLayout

Pour vérifier votre travail, ou si vous voulez simplement un code complet et correct à copier dans `MarkdownPostLayout.astro`, voici à quoi devrait ressembler votre composant Astro :

```astro title="src/layouts/MarkdownPostLayout.astro"
---
import BaseLayout from './BaseLayout.astro';
const { frontmatter } = Astro.props;
--- 
<BaseLayout pageTitle={frontmatter.title}>
  <p><em>{frontmatter.description}</em></p>
  <p>{frontmatter.pubDate.toString().slice(0,10)}</p>

  <p>Écrit par : {frontmatter.author}</p>

  <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} /> 

  <div class="tags">
    {frontmatter.tags.map((tag: string) => (
      <p class="tag"><a href={`/tags/${tag}`}>{tag}</a></p>
    ))}
  </div>

  <slot />
</BaseLayout>
<style>
  a {
    color: #00539F;
  }

  .tags {
    display: flex; 
    flex-wrap: wrap; 
  }

  .tag {
    margin: 0.25em;
    border: dotted 1px #a1a1a1;
    border-radius: .5em;
    padding: .5em 1em;
    font-size: 1.15em;
    background-color: #F8FCFD;
  }
</style>
```
  
  

<Box icon="question-mark">

### Tester vos connaissances

Associez chaque chemin de fichier à un deuxième chemin de fichier qui créera une page à la même route.

1. `src/pages/categories.astro`

    <MultipleChoice>
      <Option>`src/pages/posts/post.astro`</Option>
      <Option>`src/pages/posts/index.astro`</Option>
      <Option>`src/components/shoes/Shoe.astro`</Option>
      <Option isCorrect>`src/pages/categories/index.astro`</Option>
    </MultipleChoice>

2. `src/pages/posts.astro`

    <MultipleChoice>
      <Option>`src/pages/products/shoes.astro`</Option>
      <Option>`src/pages/posts/post.astro`</Option>
      <Option isCorrect>`src/pages/posts/index.astro`</Option>
      <Option>`src/pages/categories/index.astro`</Option>
    </MultipleChoice>

3. `src/pages/products/shoes/index.astro`

    <MultipleChoice>
      <Option isCorrect>`src/pages/products/shoes.astro`</Option>
      <Option>`src/pages/posts/post.astro`</Option>
      <Option>`src/pages/posts/index.astro`</Option>
      <Option>`src/components/shoes/Shoe.astro`</Option>
    </MultipleChoice>

</Box>

<Box icon="check-list">

## Liste de contrôle

<Checklist>
- [ ] Je peux utiliser la fonction de routage `/pages/dossier/index.astro` d'Astro.
</Checklist>
</Box>

### Ressources

- [Routage statique dans Astro](/fr/guides/routing/#routes-statiques)
